<template>
    <div class="box">
        <div class="header_box">
            <HeaderView>
                <template v-slot:center>
                   <div class="header_box_main">
                        团购详情
                   </div>  
                </template>
            </HeaderView>
        </div>
        
        <div class="main">

           <!-- 直接渲染对象 -->
            <div class="xr"> 

                <!-- 基本信息 -->
                <div class="title">
                    <span>基本信息</span>
                </div>
                <div class="banner">
                    <div class="row">
                        <span>中文名称</span>
                        <span>{{cardDetail.nameCh}}</span>
                    </div>
                    <div class="row">
                        <span>英文名称</span>
                        <span>{{cardDetail.nameEn}}</span>
                    </div>
                    <div class="row">
                        <span>商品图片</span>
                        <div class="imgDiv">
                            <img src="../../assets/images/group/img1.jpg" alt="">
                            <img src="../../assets/images/group/img1.jpg" alt="">
                            <img src="../../assets/images/group/img1.jpg" alt="">
                            <img src="../../assets/images/group/img1.jpg" alt="">
                        </div>
                    </div>
                </div>

                <!-- 团购内容 -->
                <div class="title">
                    <span>团购内容</span>
                </div>
                <div class="banner">
                    <div class="row">
                        <span>团购价格</span>
                        <span>${{cardDetail.buyPrice}}</span>
                    </div>
                    <div>
                        <p>团购套餐</p>
                        <div class="taocanDetail">
                            <p class="listName">主菜-4选2(不可重复选)</p>
                            <ul v-for="item in packageList" :key="item.id">
                                <li v-if="item.type=='主菜'">
                                    <span>*{{item.chinese}}(1份)</span>
                                    <span>${{item.price}}</span>
                                </li>
                            </ul>

                            <p class="listName">小吃(2选1)</p>
                            <ul v-for="item in packageList" :key="item.id">
                                <li v-if="item.type=='小吃'">
                                    <span>*{{item.chinese}}(1份)</span>
                                    <span>${{item.price}}</span>
                                </li>
                            </ul>

                            <p class="listName">饮品</p>
                            <ul v-for="item in packageList" :key="item.id">
                                <li v-if="item.type=='饮品'">
                                    <span>*{{item.chinese}}(1份)</span>
                                    <span>${{item.price}}</span>
                                </li>
                            </ul>
                            <hr>
                            <div class="originalprice">
                                <span>总价值:${{totlePrice}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 团购规则 -->
                <div class="title">
                    <span>团购规则</span>
                </div>
                <div class="banner">
                    <div class="row">
                        <span>有效期</span>
                        <span>购买后15天内有效</span>
                    </div>
                    <div class="row">
                        <span>活动日期</span>
                        <span>{{cardDetail.acData}}</span>
                    </div>
                    <div class="row">
                        <span>可用时间</span>
                        <span>周一至周五(全天)</span>
                    </div>
                    <div class="row">
                        <span>限购数量</span>
                        <span>每人每单限购10件</span>
                    </div>
                    <div class="row">
                        <span>剩余库存</span>
                        <span>3000份</span>
                    </div>
                    <div>
                        <p>使用规则</p>
                        <div class="taocanDetail">
                            <ul>
                                <li>*该商品不可与商家其他优惠同享</li>
                                <li>*酒水饮料等问题，请致电商家咨询，以商家反馈为准</li>
                                <li>*如部分菜品因时令或其他不可抗因素导致无法提供,商家会用等价菜品替换,具体事宜请与商家协商</li>
                                <li>*仅限到店堂食，不提供自提外带，不提供送餐</li>
                            </ul>
                        </div>
                    </div>
                    <!-- 商家服务 -->
                    <div class="title">
                        <span>商家服务</span>
                    </div>
                    <div class="banner">
                        <button class="btn">免预约</button>
                        <button class="btn">包间除外</button>
                    </div>

                    <!-- 发票信息 -->
                    <div class="title">
                        <span>发票信息</span>
                    </div>
                    <div class="banner">
                        <button class="btn">提供纸质发票</button>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</template>
<script>
    import {groupDetailsAxios} from '@/https/group'
    import HeaderView from '@/components/header1View.vue';
    export default{
        data(){
            return{
                //团购订单详情
                // cardDetail:{
                //     chineseName:'巴西烤肉两人套餐',
                //     englishName:'Barbecue 2-person package',
                //     totalPrice:'698', //团购价格
                //     originaltotalPrice:'840',  //套餐原本总价
                //     main1_name:'火焰牛排', //主菜1名字
                //     main2_name:'鸡肉披萨', 
                //     main3_name:'西冷牛排', 
                //     main4_name:'菲力牛排', 
                //     main1_price:'280',  //主菜1
                //     main2_price:'240',   
                //     main3_price:'285',
                //     main4_price:'280',
                //     snack1_name:'香酥藤椒鸡块',  //小吃
                //     snack2_name:'美式粗薯条',
                //     snack1_price:'150',
                //     snack2_price:'120',
                //     drink1_name:'金桔柠檬', //饮料
                //     drink2_name:'嫣红鲜奶茶', 
                //     drink1_price:'125', 
                //     drink2_price:'125', 
                // }
                cardDetail:{}, //现在改成了对象
                packageList:[],  //套餐细节
                itemId:'',  //该团购活动id
                totlePrice:1280
            }
        },
        created(){ 
            this.itemId=this.$route.query.id;
            groupDetailsAxios(this.itemId)
                .then(
                    res=>{
                        console.log(res.data);
                        this.cardDetail=res.data.msg;
                        this.packageList=res.data.packages;
                    }
                )
                .catch(
                    err=>{
                        console.log(err)
                    }
                )
        },
        methods:{
            
        },
        components:{
            HeaderView
        }
    }
</script>
<style scoped>
    .box{
        width: 100%;
        padding:0;
        margin: 0;
        background: #f2f2f2;
        font-size: 16px;
    }
    p{
        padding: 0;
        margin: 0;
    }
    .header_box_main{
        width: 100px;
        text-align: center;
        margin:0 auto;
    }
    .banner{
        background: #ffffff;
        padding: 10px;
    }
    .title{
        padding: 10px;
    }
    .row{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        margin: 20px auto;
    }
    .imgDiv{
        display: flex;
        flex-wrap: wrap;
        width: 73%;
    }
    img{
        width: 80px;
        height: 80px;
        border-radius: 10px;
        margin: 3px;
    }
    .taocanDetail{
        width: 90%;
        margin: 10px auto;
        border: 1px solid grey;
        padding: 10px;
    }
    .listName{
        font-weight: bolder;
    }
    li{
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
    }
    .originalprice{
        text-align: right;
        height: 50px;
        line-height: 50px;
    }
    .btn{
        width: 40%;
        height: 40px;
        background: #e4e4e4;
        color: black;
        margin: 10px;
        border: 1px solid white;
        border-radius: 5px;
    }
</style>


